<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <div th:text="${hello}"></div>
</head>
<body>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script>
    function previewFile() {
    //获取显示图片对象
    let preview = document.getElementById("showImg");//通过元素节点查找:document.queryselector ( ' img' );//获取选中图片对象（包含文件的名称、大小、类型等，如file.size>
    let file = document.getElementById("chkFile").files[0];//document. querySelector('input[type=file]').files[0];;/产明js的文件流
    let reader = new FileReader();
    if(file) {
        //通过文件流将文件转换成Base64字符串
        reader.readAsDataURL(file);
        //转换成功后
        reader.onloadend = function () {
            //将转换结果赋值给img标签
            preview.src = reader.result;//输出结呆
            let img = reader.result.replace(/^data:image\/\w+;base64,/, "");
            // console.log(img);
            $.ajax({
                type: "POST",
                url: "/demo/test",
                data: "{\"image\":\""+img+"\"}",
                dataType: "json",
                contentType:"application/json",
                success: function(data){
                    document.getElementById("showText").value = data.data;
                }
            });

        }
    }
    else{
        preview.src = "";
    }}
</script>
<h2>选择图片:</h2>
<input id="chkFile" type="file" onchange="previewFile()"><br/>
<img id="showImg" src="" height="200" alt="图片预览"><br/>
<h2>转换结果:</h2>
<textarea id="showText" style="width:400px;height: 300px;"></textarea>
</body>
</html>